{extend name='layout'}
{block name='head'}
<style type="text/css">
.k-panel{
  padding:10px;
}
.k-panel .k-left{
  float: left;
  width: 230px;
  height: 500px;
  border:solid 1px #ddd;
  overflow: auto;
}
.k-panel .k-right{
  overflow: hidden;
}
.k-panel .k-right .k-form{
  max-width: 500px;
}
</style>
{/block}
{block name='body'}
{Ke:seturl name='save,delete'}
<div class="row">
  <div class="title">管理组管理</div>
  <div class="nav">
  </div>
</div>

<div class="k-panel">
  <div class="k-left">

    <el-tree v-loading="loadTrees"
      :default-expand-all="true"
      :highlight-current="true"
      :expand-on-click-node="false"
      node-key="id"
      :data="list" :props="{label:'name'}" @node-click="onNodeClick"></el-tree>
  </div>
  <div class="k-right">


    <div class="margin">
      <el-button size="mini" :disabled="isAction" @click="onCreate"><i :class="iconFormat('plus')"></i>新增</el-button>
      <el-button size="mini" :disabled="isAction" @click="onDelete"><i :class="iconFormat('remove')"></i>删除</el-button>
      <el-button size="mini" :disabled="isAction" @click="onSubmit"><i :class="iconFormat('save')"></i>保存</el-button>
    </div>


    <el-form class="k-form" ref="form" :model="form" label-width="100px">


      <el-form-item label="父级管理组">
        <div class="form-static">{{ form.ParentName ? form.ParentName : '管理组' }}
          <a style="margin-left: 20px" v-show="!isAction" @click="dialogSelect.status=true">修改</a>
        </div>
      </el-form-item>

      <el-form-item label="管理组名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="拥有权限">
        <div style="width:220px;height: 240px;overflow: auto;border:solid 1px #ddd;">

          <el-tree ref="authTree" v-loading="loadTrees"
            :default-expand-all="true"
            :expand-on-click-node="false"
            show-checkbox
            check-strictly
            node-key="id"
            :data="rule" :props="{label:'title'}" @node-click="onNodeClick"></el-tree>
        </div>
        <span class="help">不勾选则拥有所有权限，勾选则拥有对应的权限</span>
      </el-form-item>
    </el-form>
  </div>
</div>




<!-- 选择修改管理组 start -->
<el-dialog title="选择管理组"
  :close-on-click-modal="false"
  :visible.sync="dialogSelect.status">
  <div style="height: 500px;overflow: auto;">
    <el-tree v-loading="loadTrees"
      :default-expand-all="true"
      :highlight-current="true"
      :expand-on-click-node="false"
      node-key="id"
      :data="list" :props="{label:'name'}" @node-click="onSelectOk"></el-tree>
  </div>
</el-dialog>
<!-- 选择修改管理组 end -->
{/block}